<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自友行</title>
    <link href="css/home/index.css" rel="stylesheet">
</head>
<body>
<!--===================1.头部导航 nav=================-->
<div class="head-nav">
    <div class="nav-item">
        <div class="item-logo">
            <a href="#"></a>
        </div>
        <ul class="item-lists">
            <li class="list-index"><a href="#">首页</a></li>
            <li class="list-item"><a href="destination/destination_index.html">目的地</a></li>
            <li class="list-item"><a href="#">自由行</a></li>
            <li class="list-item"><a href="#">旅游定制</a></li>
            <li class="list-item"><a href="#">游记社区</a></li>
        </ul>
        <div class="nav-login">
            <a href="customer/login.html">
                <i class="login-logo"></i>
                <span class="login-title">登录</span>
            </a>
            <a href="customer/register.html">
                <i class="register-logo"></i>
                <span class="login-title">注册</span>
            </a>
        </div>
    </div>
</div>
<!--===================2.横幅 banner=================-->
<div class="banner">
    <a href="#" class="show-img"><img src="images/home/big-banner1.jpg"></a>
    <!--    <a href="#" class="show-img"></a>-->
    <ul class="show-nav">
        <li><a href="#"><img src="images/home/small-banner1.png" onmousedown="changeImg(1)"></im></a></li>
        <li><a href="#"><img src="images/home/small-banner2.png" onmousedown="changeImg(2)"></im></a></li>
        <li><a href="#"><img src="images/home/small-banner3.png" onmousedown="changeImg(3)"></im></a></li>
        <li><a href="#"><img src="images/home/small-banner4.png" onmousedown="changeImg(4)"></im></a></li>
        <li><a href="#"><img src="images/home/small-banner5.png" onmousedown="changeImg(5)"></im></a></li>

    </ul>
    <div class="search-area">
        <div class="search-type">
            <ul>
                <li><input type="radio" checked="checked" id="all" name="search"><label for="all">全部</label></li>
                <li><input type="radio" id="freeToWalk" name="search"><label for="freeToWalk">自由行</label></li>
                <li><input type="radio" id="destination" name="search"><label for="destination">目的地</label></li>
            </ul>
        </div>
        <form class="search-form">
            <input type="text" class="keyword" placeholder="搜索目的地">
            <a href="" class="search-btn"></a>
        </form>
    </div>
</div>
<!--暂用js-->
<script src="js/index.js"></script>
<!--===================3.主要内容 main=================-->
<div class="main">
    <!--左侧推广-->
    <div class="left-ad">
        <ul>
            <li>
                <div class="ad-title">
                    <a href="">旅行家专栏</a>
                </div>
                <div class="ad-img">
                    <a href=""><img src="images/home/ad-img1.jpeg"></a>
                </div>
                <div class="ad-details">
                    <a href="">西安：旧长安的画皮</a>
                    <p>西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。</p>
                </div>
            </li>
            <li>
                <div class="ad-title">
                    <a href="">旅行家专栏</a>
                </div>
                <div class="ad-img">
                    <a href=""><img src="images/home/ad-img1.jpeg"></a>
                </div>
                <div class="ad-details">
                    <a href="">西安：旧长安的画皮</a>
                    <p>西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。</p>
                </div>
            </li>
            <li>
                <div class="ad-title">
                    <a href="">旅行家专栏</a>
                </div>
                <div class="ad-img">
                    <a href=""><img src="images/home/ad-img1.jpeg"></a>
                </div>
                <div class="ad-details">
                    <a href="">西安：旧长安的画皮</a>
                    <p>西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。</p>
                </div>
            </li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="right-notes">
        <!--右侧上-->
        <div class="right-nav">
            <ul>
                <li class="hot-notes">
                    <a href="">热门游记</a>
                    <span class="notes-sift">
                                <i></i>
                                筛选
                            </span>

                    <div class="sift-lists">
                        <div class="destination-search">
                            <div class="label">目的地</div>
                            <div class="destination-search-area">
                                <div class="search-input">
                                    <input type="text" placeholder="输入你想查看的目的地">

                                </div>
                                <div class="hot-place">
                                    <a href="#">斯里兰卡</a>
                                    <a href="#">济州岛</a>
                                    <a href="#">香港</a>
                                    <a href="#">北京</a>
                                    <a href="#">云南</a>
                                    <a href="#">泰国</a>
                                    <a href="#">青海湖</a>
                                    <a href="#">日本</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="new-notes">
                    <a href="">最新发表</a>
                </li>
            </ul>
            <div class="write-notes">
                <a href="">
                    <i></i>
                    写游记
                </a>

            </div>
        </div>

        <div class="notes-lists-hot">
            <div class="item">
                <div class="item-img">
                    <a href=""><img src="images/home/item-img.jfif"></a>
                </div>
                <div class="notes">
                    <div class="notes-details">
                        <a>厦门——一座心心念念已久的城市！</a>
                        <p>
                            多年前，我一好哥们儿给我发信息， 他说，“我准备去 厦门 拍婚纱，要不一起顺便去 厦门 玩儿几天吧，反正也一直没去过。” 我说：“行啊，那你提前把时间计划好。”
                            可是等他们安排好时间，...
                        </p>
                        <span class="user">
                            <div class="a">
                                <a href="#"><img src="images/home/user.jpeg"></a>
                                <a href="#">大大泡泡糖</a>
                                <img src="images/home/loc1.svg">
                                <a href="#">厦门</a>
                            </div>
                            <em>11</em>
                            <a class="praise-btn"></a>
                        </span>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <a href=""><img src="images/home/item-img.jfif"></a>
                </div>
                <div class="notes">
                    <div class="notes-details">
                        <a>厦门——一座心心念念已久的城市！</a>
                        <p>
                            多年前，我一好哥们儿给我发信息， 他说，“我准备去 厦门 拍婚纱，要不一起顺便去 厦门 玩儿几天吧，反正也一直没去过。” 我说：“行啊，那你提前把时间计划好。”
                            可是等他们安排好时间，...
                        </p>
                        <span class="user">
                            <div class="a">
                                <a href="#"><img src="images/home/user.jpeg"></a>
                                <a href="#">大大泡泡糖</a>
                                <img src="images/home/loc1.svg">
                                <a href="#">厦门</a>
                            </div>
                            <em>11</em>
                            <a class="praise-btn"></a>
                        </span>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <a href=""><img src="images/home/item-img.jfif"></a>
                </div>
                <div class="notes">
                    <div class="notes-details">
                        <a>厦门——一座心心念念已久的城市！</a>
                        <p>
                            多年前，我一好哥们儿给我发信息， 他说，“我准备去 厦门 拍婚纱，要不一起顺便去 厦门 玩儿几天吧，反正也一直没去过。” 我说：“行啊，那你提前把时间计划好。”
                            可是等他们安排好时间，...
                        </p>
                        <span class="user">
                            <div class="a">
                                <a href="#"><img src="images/home/user.jpeg"></a>
                                <a href="#">大大泡泡糖</a>
                                <img src="images/home/loc1.svg">
                                <a href="#">厦门</a>
                            </div>
                            <em>11</em>
                            <a class="praise-btn"></a>
                        </span>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <a href=""><img src="images/home/item-img.jfif"></a>
                </div>
                <div class="notes">
                    <div class="notes-details">
                        <a>厦门——一座心心念念已久的城市！</a>
                        <p>
                            多年前，我一好哥们儿给我发信息， 他说，“我准备去 厦门 拍婚纱，要不一起顺便去 厦门 玩儿几天吧，反正也一直没去过。” 我说：“行啊，那你提前把时间计划好。”
                            可是等他们安排好时间，...
                        </p>
                        <span class="user">
                            <div class="a">
                                <a href="#"><img src="images/home/user.jpeg"></a>
                                <a href="#">大大泡泡糖</a>
                                <img src="images/home/loc1.svg">
                                <a href="#">厦门</a>
                            </div>
                            <em>11</em>
                            <a class="praise-btn"></a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="notes-lists-new">
            <div class="item">
                <div class="item-img">
                    <a href=""><img src="images/home/item-img.jfif"></a>
                </div>
                <div class="notes">
                    <div class="notes-details">
                        <a>厦门——一座心心念念已久的城市！</a>
                        <p>
                            多年前，我一好哥们儿给我发信息， 他说，“我准备去 厦门 拍婚纱，要不一起顺便去 厦门 玩儿几天吧，反正也一直没去过。” 我说：“行啊，那你提前把时间计划好。”
                            可是等他们安排好时间，...
                        </p>
                        <span class="user">
                            <div class="a">
                                <a href="#"><img src="images/home/user.jpeg"></a>
                                <a href="#">大大泡泡糖</a>
                                <img src="images/home/loc1.svg">
                                <a href="#">厦门</a>
                            </div>
                            <em>11</em>
                            <a class="praise-btn"></a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!--===================4.底部 footer=================-->
<div class="footer">

</div>
</body>
</html>